import React, {Component} from 'react';
import {ScrollView,TextInput,Button,Text,StyleSheet} from 'react-native';
import DataStore from "../../expand/offlineCache/DataStore";

class FetchDemo extends Component {
  constructor(props){
    super(props);
    this.state = {
      searchTxt: '',
      gitHubData: ''
    }
  }
  render() {
    let {gitHubData} = this.state;
    return (
      <ScrollView contentContainerStyle={styles.container}>
        <TextInput style={styles.inputTxt} onChangeText={val=>{this.setState({searchTxt:val})}}/>
        <Button title={'请求数据'} onPress={this.loadData}/>
        <Text>{gitHubData}</Text>
      </ScrollView>
    );
  }

  loadData = () => {
    let {searchTxt} = this.state;
    let url = `https://api.github.com/search/repositories?q=${searchTxt}`;
    let dataStore = new DataStore();
    dataStore.fetchData(url)
      .then(data => {
         this.setState({
           gitHubData:JSON.stringify(data.timeStamp)
         })
      })
      .catch(err=>{
        this.setState({
          gitHubData:err.toString()
        })
      })
  }
}

const styles = StyleSheet.create({
  container:{
    alignItems:'center',
  },
  inputTxt:{
    width: '90%',
    height: 50,
    borderColor:'red',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
});

export default FetchDemo;